<template>
	<view class="content">
		<swiper class="banner"   autoplay="ture" interval="2000" duration="500" circular='true' @change="swiperchange">	
			<swiper-item v-for="(item,index) in thumb" :key="index" >
				<image :src="item.filepath"></image>
				<view class="swipernum">
					{{current}}/{{thumb.length}}
				</view>
			</swiper-item>	
		</swiper>
		<view class="good-name">
			{{info.name}}
		</view>
		<view class="price border-bottom" v-if="role=='s'">
			<text style="font-size: 26rpx;font-weight: bold;">￥</text>
			<text style="font-size: 40rpx;font-weight: bold;margin-right: 20rpx;" v-if="info.seckill!=1">{{info.merchant_price}}</text>
			<text style="font-size: 40rpx;font-weight: bold;margin-right: 20rpx;" v-if="info.seckill==1">{{info.price_spike}}</text>
			<text style="font-size: 20rpx;color: #999999;">零售￥</text>
			<text style="font-size: 24rpx;text-decoration: line-through;color: #999999;"  >{{info.user_price}}</text>
		    <view style="font-size: 26rpx;color: #38D180;margin-top: 10rpx;" v-if="fan=='fan'">返佣金额为￥{{info.rebate}}</view>
		</view>	
		<view class="price border-bottom" v-if="role=='p'">
			<text style="font-size: 26rpx;font-weight: bold;">￥</text>
			<text style="font-size: 40rpx;font-weight: bold;margin-right: 20rpx;" v-if="info.seckill!=1">{{info.user_price}}</text>
			<text style="font-size: 40rpx;font-weight: bold;margin-right: 20rpx;" v-if="info.seckill==1">{{info.price_spike}}</text>
			<text style="font-size: 20rpx;color: #999999;">￥</text>
			<text style="font-size: 24rpx;text-decoration: line-through;color: #999999;">{{info.price}}</text>
		</view>
		
		<view class="goods-tab uni-row border-bottom">
			<view class="goods-tab-item " :class="{'tab-active':index==flag}" v-for="(item,index) in tab" :key="index" @tap="changetab(index)" >
				{{item.name}}
				<view></view>
			</view>
		</view>
	
		<view class="guige" v-show="info_show">
			<view class="uni-row">
				<view class="guige-item">
					<view class="guige-name"><text>产地</text> | <text>Place of Origin</text></view>
					<view class="guige-info">{{info.origin}}</view>
				</view>
				<view class="guige-item">
					<view class="guige-name"><text>口味</text> | <text>Flavor</text></view>
					<view class="guige-info">{{info.flavor}}</view>
				</view>
				<view class="guige-item">
					<view class="guige-name"><text>容量</text> | <text>Capacity</text></view>
					<view class="guige-info">{{info.capacity}}mL/瓶</view>
				</view>
				<view class="guige-item">
					<view class="guige-name"><text>麦芽度</text> | <text>Maltiness</text></view>
					<view class="guige-info">{{info.maltiness}}°</view>
				</view>
				<view class="guige-item">
					<view class="guige-name"><text>酒精度</text> | <text>Alcohol content</text></view>
					<view class="guige-info">{{info.alcohol}}%vol</view>
				</view>
				<view class="guige-item">
					<view class="guige-name"><text>风格</text> | <text>Style</text></view>
					<view class="guige-info">{{info.style}}</view>
				</view>
				<view class="guige-item">
					<view class="guige-name"><text>香气</text> | <text>Aroma</text></view>
					<view class="uni-row guige-ping">
						<image :src="item.img" v-for="(item,index) in ping_nums1" :key="index"></image>
					</view>
				</view>	
				<view class="guige-item">
					<view class="guige-name"><text>味道</text> | <text>Taste</text></view>
					<view class="uni-row guige-ping">
						<image :src="item.img" v-for="(item,index) in ping_nums2" :key="index"></image>
						
					</view>
				</view>
				<view class="guige-item">
					<view class="guige-name"><text>外观</text> | <text>Appearance</text></view>
					<view class="uni-row guige-ping">
						<image :src="item.img" v-for="(item,index) in ping_nums3" :key="index"></image>
					</view>
				</view>
				<view class="guige-item">
					<view class="guige-name"><text>苦度</text> | <text>Bitterness</text></view>
					<view class="uni-row guige-ping">
						<image :src="item.img" v-for="(item,index) in ping_nums4" :key="index"></image>
					</view>
				</view>
				<view class="guige-item"style="width: 100%;">
					<view class="guige-name"><text>简介</text> | <text>Brief Introduction</text></view>
					<view style="font-size: 28rpx;line-height: 50rpx;">
						{{info.subhead}}
					</view>
				</view>
			</view>
		</view>
        <view class="goods-info" v-show="info_show" v-html="info.description">
        	
        </view>
	    <view class="pingjia" v-show="ping_show"style="margin-top: 20rpx;padding-left: 32rpx;">
	    	<view class="uni-row" v-for="(item,index) in info.evaluate" :key="index">
	    		<view class="pingjia-icon">
	    			<image :src="item.head_url"></image>
	    		</view>
	    		<view class="pingjia-info">
	    			<view class="pingjia-name">
	    				<text>{{item.nickname}}</text>
	    				<text style="float: right;">{{item.create_time}}</text>
	    			</view>
	    			<view class="ping-list">
	    				<image :src="it.img" v-for="(it,index) in item.kong" :key="index"></image>
	    			</view>
	    			<view class="pingjia-text">
	    				{{item.content}}
	    			</view>
	    			<view class="pingjia-img">
	    				<image :src="item.filepath" @tap="yulan" :data-img="item.filepath" v-for="(item,index) in item.thumb" :key = "index"></image>
	    			</view>
	    		</view>
	    	</view>
	    </view>
		<view style="height: 160rpx;">			
		</view>
		<view class="bottom">
			<view class="bottom-container">
				<view class="biao-container">
					<view class="biao-item">
						
					    <image src="../../static/images/cheng-icon.png" @tap="goshangcheng()"></image>
						
						<view>
							商城
						</view>
					</view>
					<view class="biao-item" @tap="shoucang()">
						
						<image  v-if="info.collect==1" src="../../static/images/shoucang-active.png" ></image>
						<image  v-if="info.collect==0" src="../../static/images/shoucang.png"></image>
						
						<view v-if="info.collect==1">
							取消收藏
						</view>
						<view v-if="info.collect==0">
							收藏
						</view>
					</view>
					<view class="biao-item" @tap="gocar()">
						<image src="../../static/images/car-icon.png"></image>
						<view>
							{{car_btn}}
						</view>
					</view>
					
				</view>
			    <view class="btn-list">
					<view class="car-btn" @tap="addcar()">
						{{btn_text}}
					</view>
					<view class="goumai-btn" @tap="buy_btn()">
						{{goumai_btn}}
					</view>
				</view>
			</view>
		</view>
		<!-- 加入购物车弹出的半页 -->
		<view v-show="showban">
			<view class="mark">
				
			</view>
			<view class="goumai-container">
				<view class="gouai-icon-container" style="position: relative;">
					<view class="gouai-icon">
						<image :src="info.img"></image>
					</view>
					<view class="goumai-price" v-if="role=='p'&&info.seckill==0">
						<text style="font-size: 24rpx;">￥</text>{{info.user_price}}
					</view>
					<view class="goumai-price" v-if="role=='s'&&info.seckill==0">
						<text style="font-size: 24rpx;">￥</text>{{info.merchant_price}}
					</view>
					<view class="goumai-price" v-if="info.seckill==1">
						<text style="font-size: 24rpx;">￥</text>{{info.price_spike}}
					</view>
					<image src="../../static/images/pay-close.png" @tap="close_kuang()" style="width: 36rpx;height: 36rpx;position: absolute;bottom:75rpx;right:0rpx ;"></image>
				</view>
				<view class="border-bottom" style="height: 81rpx;"></view>
				<view class="gou-num-container">
					<view class="gou-num-text" v-if="role=='s'">
						订货数量
					</view>	
					<view class="gou-num-text" v-if="role=='p'">
						购买数量
					</view>
					<view class="gou-num-kuang">
						<image src="../../static/images/jia-icon.png"  @tap="add()"></image>
						<view>
							{{number}}
						</view>
						<image src="../../static/images/jian-icon.png" @tap="reduce()"></image>
					</view>
				</view>
				<view class="addcar" @tap="addcar_action()">
					{{btn_text}}
				</view>
			</view>
		</view>
		<!-- 购买弹出的半页 -->
		<view v-show="show_gou">
			<view class="mark">
				
			</view>
			<view class="goumai-container">
				<view class="gouai-icon-container" style="position: relative;">
					<view class="gouai-icon">
						<image :src="info.img"></image>
					</view>
					<view class="goumai-price" v-if="role=='p'&&info.seckill==0">
						<text style="font-size: 24rpx;">￥</text>{{info.user_price}}
					</view>
					<view class="goumai-price" v-if="role=='s'&&info.seckill==0">
						<text style="font-size: 24rpx;">￥</text>{{info.merchant_price}}
					</view>
					<view class="goumai-price" v-if="info.seckill==1">
						<text style="font-size: 24rpx;">￥</text>{{info.price_spike}}
					</view>
					<image src="../../static/images/pay-close.png" @tap="close_kuang()" style="width: 36rpx;height: 36rpx;position: absolute;bottom:75rpx;right:0rpx ;"></image>
				</view>
				<view class="border-bottom" style="height: 81rpx;"></view>
				<view class="gou-num-container">
					<view class="gou-num-text" v-if="role=='s'">
						订货数量
					</view>	
					<view class="gou-num-text" v-if="role=='p'">
						购买数量
					</view>
					<view class="gou-num-kuang">
						<image src="../../static/images/jia-icon.png" @tap="add()"></image>
						<view>
							{{number}}
						</view>
						<image src="../../static/images/jian-icon.png" @tap="reduce()"></image>
					</view>
				</view>
				<view class="addcar" @tap="gobuy()">
					{{goumai_btn}}
				</view>
			</view>
		</view>
	</view>    
</template>

<script>
	import httpPath from '@/static/js/path.js';
	import {isshangjia} from "@/static/js/login.js";
	import {getlogin} from "@/static/js/login.js";
	export default {
			data() {
				return {
				   current:1,//banner图当前序号
				   flag:0,//中间tab序号
				   tab:[
					   {"name":"嗨啤详情"},
					   {"name":"嗨啤酒评"},
				   ],//中间tab
				   info_show:true,
				   guige_show:false,
				   ping_show:false,
				   showban:false,
				   id:"",
				   info:{},
				   thumb:[],
				   ping_nums1:[],//存储显示瓶子数组
				   ping_nums2:[],
				   ping_nums3:[],
				   ping_nums4:[],
                   role:"p",
				   btn_text:"加入购物车",
				   goumai_btn:"立即购买",
				   car_btn:"购物车",
				   number:1,
				   show_gou:false,
				   fan:"",
				}
			},
			onLoad(option) {
				if(option.id){
					this.id=option.id
				}
				let ss = uni.getStorageSync('user');
				if(ss){
					this.wxinfo_id=ss.wxinfo_id;
				}else{
					this.wxinfo_id=0;
				}
				this.getdata()
				
				this.role=isshangjia()
				if(this.role=="s"){
					this.btn_text="加入订货单"
					this.goumai_btn ="立即订货"
					this.car_btn = "订货单"
				}else{
					this.btn_text="加入购物车"
					this.goumai_btn="立即购买"
					this.car_btn = "购物车"
				}
				if(option.fan){
					this.fan=option.fan;
				}
				console.log(option.fan)
			},
			methods: {
				/**
				 * @param {Object} img预览图片
				 */
				yulan(e) {
					let img = e.currentTarget.dataset.img;
					uni.previewImage({
						urls: [img],
						longPressActions: {
							// itemList: ['发送给朋友', '保存图片', '收藏'],
							success: function(data) {
								console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
							},
							fail: function(err) {
								console.log(err.errMsg);
							}
						}
					});
				},
				/**
				 * 前往确认订单页面
				 */
				gobuy(){
					// [{"id":20,"spu_id":11,"name":" 哈尔滨（Harbin） 小麦王啤酒 550ml*20听 麦香浓郁 一起哈啤","user_price":"243.00","merchant_price":"242.00","count":4,"img":"http://www.jc.hjll.com.cn/uploads/admin/article_thumb/20200527/607e728d157e252cd3223a475123f9ea.jpg","wxinfo_id":1,"type":1,"selectimg":"../../static/images/xuanzhong.png","checked":1,"true_price":"242.00"}]
					let goods=[{checked:1,count:this.number,id:0,img:this.info.img,merchant_price:this.info.merchant_price,name:this.info.name,selectimg:"../../static/images/xuanzhong.png",spu_id:this.id,user_price:this.info.user_price,type:this.info.type,rebate:this.info.rebate}]
					let str= JSON.stringify(goods)
					if(this.info.seckill==1){
						uni.navigateTo({
							url: '../user/querendingdan?goods='+str+'&islimit='+this.info.seckill+'&killprice='+this.info.price_spike
						});
					}else{
						uni.navigateTo({
							url: '../user/querendingdan?goods='+str
						});
					}
					
				},
				/**
				 * 加入购物车
				 */
				addcar_action(){
					uni.request({
						url: httpPath.filePath+"/index/shopping/publish",
						method:'POST',
						header:{'content-type':'application/x-www-form-urlencoded'},
						data: {spu_id:this.id,count:this.number,wxinfo_id:this.wxinfo_id},
						success: (res) => {
							if(res.data.code==200){
								uni.showToast({
									icon:"none",
									title:"添加成功！"
								})
								this.showban = false;
							}
						}
					});
				},
				/**
				 * 点击增加按钮时数字增加
				 */
				add(){
					this.number++;
				},
				/**
				 * 点击减少按钮时数字减少
				 */
				reduce(){
					if(this.number<=1){
						uni.showModal({
							content:"已经最少了，不能再少了"
						})
					}else{
						this.number--;
					}
					
				},
				/**
				 * 点击购买出现购买的半页
				 */
				buy_btn(){
					let userinfo= getlogin();
					if(userinfo){
					    this.show_gou=true;
					}
				},
				/**
				 * 前往购物车
				 */
				gocar(){
					uni.navigateTo({
						url:"car"
					})
				},
				/**
				 * 前往商城
				 */
				goshangcheng(){
					uni.switchTab({
						url:"index"
					})
				},
				/**
				 * 收藏商品
				 */
				shoucang(){
					
					let userinfo= getlogin();
					if(userinfo){
						uni.request({
							url: httpPath.filePath+'/index/spucollect/publish',
							method:'POST',
							header:{'content-type':'application/x-www-form-urlencoded'},
							data: {wxinfo_id:this.wxinfo_id,id:this.id},
							success: (res) => {
								if(res.data.code==200){
									
									this.info.collect=1;
								}else if(res.data.code==201){
									this.info.collect=0;
									
								}  
							}
						});
					}
				},
				/**
				 * @param {Object} num 显示瓶子数
				 */
				process(num){
					let pings = [];
					let yushu = (num*10)%10;	
					let shang = parseInt((num*10)/10);			
					if(yushu==0){
						for(let i = 0;i<5;i++){
							if(i<shang){
								pings.push({img:"../../static/images/ping-active.png"})
							}else{
								pings.push({img:"../../static/images/ping-no.png"})
							}
						}
					}else if(yushu!=0){
						for(let i = 0;i<5;i++){
							if(i<shang){
								pings.push({img:"../../static/images/ping-active.png"})
							}else if(i==shang){
								pings.push({img:"../../static/images/ping-ban.png"})
							}else{
								pings.push({img:"../../static/images/ping-no.png"})
							}
							
						}
					}
					return pings;
				},
				/**
				 * 获取详情数据
				 */
				getdata(){
					uni.request({
						url: httpPath.filePath+'/index/detail/index',
						method:'POST',
						header:{'content-type':'application/x-www-form-urlencoded'},
						data: {wxinfo_id:this.wxinfo_id,id:this.id},
						success: (res) => {
							if(res.data.code==200){
								this.info=res.data.data.info;
							    this.thumb =res.data.data.info.thumb
							    this.ping_nums1 =this.process(this.info.aroma)
							    this.ping_nums2 =this.process(this.info.taste)
							    this.ping_nums3 =this.process(this.info.appearance)
							    this.ping_nums4 =this.process(this.info.bittemess)
							    if(this.info.evaluate.length!=0){
									for(let i=0;i<this.info.evaluate.length;i++){
										for(let a=0;a<5;a++){
											if(a<this.info.evaluate[i].grade){
												this.info.evaluate[i].kong.push({img:"../../static/images/pei.png"})
											}else{
												this.info.evaluate[i].kong.push({img:"../../static/images/pei-no.png"})
											}
										}
									}
								}
								let richtext=this.info.description
								const regex = new RegExp('<img', 'gi');
								//判断是否头图片
								if(richtext.indexOf('img') != -1){
								    richtext= richtext.replace(regex, `<img style="width: 100%;display:block;height:auto;"`);
								}
								const imgurl=new RegExp('src="/ueditor','gi');
								const p=new RegExp('<p>','gi');
								if(richtext.indexOf('src="/ueditor') != -1){
									
								    richtext= richtext.replace(imgurl, 'src='+httpPath.filePath+'/ueditor');
								   
								}
								if(richtext.indexOf('<p>') != -1){
								    richtext= richtext.replace(p, '<p style="padding:0px 10px">');
								}
								this.info.description = richtext;
							}   
						}
					});
				},
				/**
				 * 点击加入购物车按钮显示半页
				 */
				addcar(){
					let userinfo= getlogin();
					if(userinfo){
						if(this.info.seckill==1){
							
							uni.showModal({
								showCancel:false,
								content:"该商品是限时惠购商品，请立即购买"
							})
							return false;
						}
						this.showban=true;
					}
				},
				close_kuang(){
					this.show_gou=false;
					this.showban= false;
				},
	            swiperchange(e){					
					this.current=e.detail.current+1;
				},changetab(index){
					this.flag=index;
					if(index==0){
						this.ping_show=false
						this.info_show=true;
					}else if(index==1){
						this.info_show=false;
						this.ping_show=true;
						
					}
				}
			},
			
		}
</script>

<style>
	/* 按钮 */
	
	.bottom{position: fixed;bottom: 0px; left: 0px;width: 100%;padding-bottom: 38rpx;}
	.bottom-container{box-shadow:0px 3px 11px 0px rgba(4,0,0,0.1);width: 686rpx;margin: auto;overflow: hidden;border-radius: 49rpx;height: 98rpx;background: #FFFFFF;}
	.biao-container{width: 352rpx;overflow: hidden;float: left;}
	.biao-item{width: 33.3%;float: left;margin-top: 10rpx;}
	.biao-item image{width: 42rpx;height: 42rpx;margin: auto;display: block;}
	.biao-item view{font-size: 20rpx;color: #333333;text-align: center;}
	.btn-list{width: 334rpx;float: right;}
	.btn-list view{width: 50%;float: left;height: 98rpx;line-height: 98rpx;font-size: 24rpx;color: #FFFFFF;font-weight: bold;text-align: center;}
	.car-btn{background:linear-gradient(-45deg,rgba(56,209,128,0.96),rgba(154,255,221,0.96));border-radius:49rpx 0rpx 0rpx 49rpx;}	
	.goumai-btn{background:linear-gradient(180deg,rgba(80,80,80,1),rgba(51,51,51,1));border-radius:0rpx 49rpx 49rpx 0rpx;}
	/* 半页 */
	.goumai-container{background-color: #FFFFFF;height: 458rpx;width: 100%;position: fixed;bottom: 0px;left: 0px;}
	.gouai-icon-container{overflow: hidden; height: 220rpx;margin-top: -83rpx;width: 686rpx;margin-left: 32rpx;}
	.gouai-icon{float: left; width: 220rpx;height: 220rpx;border-radius: 5px;background: #FFFFFF;box-sizing: border-box;border: 1px solid #F2F2F2;}
	.gouai-icon image{width: 100%;height: 100%;border-radius: 5px;}
	.goumai-price{width: 400rpx;float: left;box-sizing: border-box;padding-top: 180rpx;box-sizing: border-box;padding-left: 36rpx;font-size: 30rpx;font-weight: bold;}
	.addcar{background:linear-gradient(166deg,rgba(80,80,80,1),rgba(51,51,51,1));height: 98rpx;line-height: 98rpx;text-align: center;font-size: 33rpx;color: #FFFFFF;font-weight: bold;}
	.gou-num-container{height: 141rpx;box-sizing: border-box;padding:0px 32rpx;overflow: hidden;}
	.gou-num-container view{width: 50%;float: left;line-height: 141rpx;font-size: 28rpx;}
    .gou-num-kuang{position: relative;height: 141rpx;}
	.gou-num-kuang image{width:40rpx;height: 40rpx;}
	.gou-num-kuang image:nth-of-type(1){position: absolute;top: 50rpx;right: 0px;}
	.gou-num-kuang view{height: 64rpx;width: 64rpx;background:rgba(255,255,255,1);border:1px solid #F2F2F2;font-size: 28rpx;text-align: center;line-height: 64rpx;position: absolute;top: 42rpx;right: 83rpx;}
	.gou-num-kuang image:nth-of-type(2){position: absolute;top: 50rpx;right: 189rpx;}
	.banner{height: 750rpx;width: 100%;}
	.banner image{width: 100%;height: 100%;}
	.swipernum{position: absolute;bottom: 24rpx;left: 24rpx;height: 43rpx;width: 105rpx;border-radius: 25rpx;background: #999999;color: #fff;font-size: 24rpx;line-height: 43rpx;text-align: center;}
    .good-name{font-size: 28rpx;line-height: 60rpx;padding: 0px 32rpx;}
	.price{padding: 0rpx 32rpx;padding-bottom: 30rpx;}
	.goods-tab{height:72rpx;}
	.goods-tab-item{font-size: 28rpx;font-weight: bold;text-align: center;width: 50%;position: relative;line-height: 72rpx;}
	.tab-active{color: #7ADBA8;}
	.tab-active view{background: #7ADBA8;}
	.goods-tab-item view{width: 115rpx;height: 4rpx;position: absolute;bottom: 0px;left: 130rpx;}
	.goods-info{padding-top: 10rpx;width: 100%;line-height: 50rpx;font-size: 28rpx;}
	.goods-info image{width: 686rpx;display: block;margin: auto;}
	.goods-info view{width: 686rpx;margin: auto;}
	.guige{padding: 32rpx;padding-bottom: 0px;}
	.guige-item{width: 50%;margin-bottom: 30rpx;}
	.guige-name{font-size: 28rpx;color: #999999;line-height: 60rpx;}
	.guige-info{font-size: 28rpx;line-height: 60rpx;}
	.guige-item:nth-of-type(2n){box-sizing:border-box;padding-left: 80rpx;}
	.guige-ping image{width: 27rpx;height: 57rpx;margin-right: 13rpx;}
	.pingjia-icon{width: 50rpx;height: 50rpx;border-radius:50% ;overflow: hidden;}
	.pingjia-icon image{width: 50rpx;height: 50rpx;}
	.pingjia-info{width: 640rpx;padding-left: 10rpx;}
	.pingjia-name{font-size: 28rpx;color: #999999;}
	.ping-list image{width: 16rpx;height: 24rpx;margin-right: 9rpx;}
	.pingjia-text{font-size: 28rpx;line-height: 50rpx;margin-bottom: 10rpx;}
	.pingjia-img image{width:189rpx ;height: 189rpx;margin-bottom: 10rpx;}
	.pingjia-img image:nth-of-type(3n-1){margin: 0px 33rpx 10rpx;}
	
</style>
